<template>
	<div>
		<div style='padding:20px 0 0 18px;border-top:1px solid #eee;'>
			<el-row style='padding:20px 0;border-bottom:1px solid #eee;font-size:15px;'>
				<el-col :span='6'>收货人</el-col>
				<el-col :span='18'>
					<input type="text" v-model='name' placeholder="请填写收货人">
				</el-col>
			</el-row>
			<el-row style='padding:20px 0;border-bottom:1px solid #eee;font-size:15px;'>
				<el-row>
					<el-col :span='6'>联系电话</el-col>
					<el-col :span='18'>
						<input type="text" v-model='phone' placeholder="请填写联系电话">
					</el-col>
				</el-row>
				<el-row style='margin-top:30px;'>
					<div class='change-city'>
						<el-col :span='6'>所在地区</el-col>
						<el-col :span='15' v-if='!address.length'>
							<input type="text" placeholder="请选择" readonly>
						</el-col>
						<el-col :span='15' v-else>
							<el-row>
								<el-col :span='8' v-for="(val,index) in address" :key='index'>
									{{val.value}}
								</el-col>
							</el-row>
						</el-col>
						<el-col :span='3' style='font-size:20px;text-align:center'>
							<span class='fa fa-angle-right'></span>
						</el-col>
					</div>
				</el-row>
			</el-row>
			<el-row style='padding:20px 0;border-bottom:1px solid #eee;font-size:15px;'>
				<el-col :span='6'>详细地址</el-col>
				<el-col :span='18'>
					<input type="text" v-model='addressInfo' placeholder="如街道、楼牌号等">
				</el-col>
			</el-row>
		</div>
		 <!-- 这两个层都是控制左边导航 -->
	    <!-- <CloseLeft v-if='controlModel'  @closeModel='controlModel=false'/> -->
	    <!-- <transition
	        enter-active-class='animated bounceInLeft'
	        leave-active-class='animated bounceOutLeft'
	    >
	        <Left v-if='controlModel'  @changeType='changeType'/>
	    </transition> -->
	    <!-- 这两个层都是控制左边导航 -->

	    <!-- 这一个层是聊天二维码 -->
	    <!-- <transition
	        enter-active-class='animated fadeIn'
	        leave-active-class='animated fadeOut'
	    >
	        <Qr v-if='controlQr' @closeQr='controlQr=false'/>
	    </transition> -->
	    <div class='submit' @click='addAddress'>提交</div>
	    <!-- 这一个层是聊天二维码 -->
	    <!-- <Bottom @openLeft='controlModel=true' @openQr='controlQr=true' @car='car'/> -->
	</div>
</template>

<script>
	import Left from '@/components/left.vue';
	import Bottom from '@/components/bottom.vue';
	import CloseLeft from '@/components/close-left.vue';
	import Qr from '@/components/qr.vue';
	import ADDRESS from './ADDRESS_ALL.js';
	
	import {AJAX,_layer,SAVA_ADDRESS,EDIT_ADDRESS} from '@/comm.js';

	export default {
		data(){
			return ({
				address:'',
				id:'',
				radio:false,
				name:'',
				phone:'',
				addressInfo:'',
				address:[],
				controlModel:false,     //控制左边导航
                controlQr:false,        //控制二维码
			});
		},
		created(){
			$('body').css('background','white');
			let address=this.$route.query.address;
			if(address){
				this.name=address.addressdetailed;
				this.phone=address.contactphone;
				this.id=address.id;
			}
		},
		components:{
		    Left,
		    Bottom,
		    CloseLeft,
		    Qr,
		},
		methods:{
		    //左边导航的选择
		    changeType(){},
		    car(){
		        //下单
		    },
		    //保存地址
		    addAddress(){
		    	if(!(this.name&&this.phone&&this.addressInfo)){
					_layer('请输入正确的信息');
					return ;
		    	}
		    	for(let i=0;i<this.address.length;i++){
					if(!this.address[i].value){
						_layer('请选择所在地区');
						return;
					}
		    	}
		    	if((this.phone[0]!=1)&&this.phone.length!=11){
		    		_layer('请输入正确的手机号码');
		    		return;
		    	}
		    	let url=this.id?EDIT_ADDRESS:SAVA_ADDRESS;
		    	$.post(url,{
		    		id:this.id?this.id:'',
					intouser:this.name,
					whereaddress:JSON.stringify(this.address),
					addressdetailed:this.addressInfo,
					contactphone:this.phone
			    },(data)=>{ 
			        if(data.state){
			            this.$router.push({path:'/OrderSubmit'});
			        }else{
			            _layer(data.message);
			        }
			    });
		    }
		},
		mounted(){
			let This=this;
			setTimeout(function(){
				new MobileSelect({
				    trigger: '.change-city',
				    title: '地区选择',
				    triggerDisplayData:false,
				    wheels: [
		                {data:ADDRESS}
		            ],
				    callback:function(indexArr, data){
				    	This.address=data;
				    	console.log(This.address)
				    }
				});
			},500);
		}
	}
</script>

<style>
	.submit{
		margin-top:20px;
		height:50px;
		font-size:20px;
		line-height: 50px;
		text-align: center;
		background: #409eff9c;
		color:white;
	}
</style>